<template>
	<view class="searchmain">
		<view class="navheader" :style="`height:${$store.state.height*2}upx;`">

		</view>
		<view class="searchheader" :style="`top:${$store.state.height*2}upx;`">
			<text @click="goBack" style="color: red;"> 返回 </text>
			<input @confirm="getsearchlist" v-model="message"  focus='true' class="input1" type="text" placeholder="输入关键字,不超过10个字符"
			 maxlength="10" />
			<text @click="delmessage" v-if="message.length>0">取消</text>
		</view>



		<view class="chai" v-if="isshow">
			<view @click="goitem(item.id)" class="chaiitem" v-for="item in searchlists" :key="item.id">
				<view class="left">
					<image :src="item.imgurl" mode="aspectFill"></image>
				</view>
				<view class="right">
					<text class="title">{{item.title}}</text>
					<star :score='item.star' />
					<text class="list1">类型：{{item.catagory}}</text>
					<text class="list1">上映时间：{{item.pushdate}}</text>
				</view>
			</view>
		</view>

		<view class="chai" v-else>
			<view @click="goitem(item.id)" class="chaiitem" v-for="item in searchlist" :key="item.id">
				<view class="left">
					<image :src="item.imgurl" mode="aspectFill"></image>
				</view>
				<view class="right">
					<text class="title">{{item.title}}</text>
					<star :score='item.star' />
					<text class="list1">类型：{{item.catagory}}</text>
					<text class="list1">上映时间：{{item.pushdate}}</text>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	import {
		request
	} from "../../request/index.js"
	import star from '../../components/index/star.vue'
	export default {
		data() {
			return {
				timer: null,
				searchlist: [],
				message: '',
				searchlists: [],
				isshow: true
			}
		},
		onLoad() {
			this.getsearchlists()
		},
		components: {
			star
		},
		onReachBottom() {
			request({
				url: `/search/lists`,
				method: 'get',
			}).then(res => {
				// console.log(res)
				this.searchlists = [...this.searchlists, ...res.data.data]
			})

		},
		methods: {
			// 清空
			delmessage(){
				this.message=""
			},
			// 返回上一页
			goBack() {
				this.message = ""
				uni.navigateBack({

				})
			},
			//跳转到详情页
			goitem(e) {
				// console.log(e)
				uni.navigateTo({
					url: `../movie/movie?id=${e}`
				})
			},

			// 关键字搜索,用户手动点开始后触发
			getsearchlist() {
				this.isshow = false
				var that = this
				if (this.message) {
					clearTimeout(that.timer)
					that.timer = setTimeout(function() {
						request({
							url: `/search/list?message=${that.message}`,
							method: 'get',
						}).then(res => {
							that.searchlist = res.data.data
						})
					}, 1200)
				} else {
					this.isshow = true
					this.searchlists = []
					this.getsearchlists()
				}
			},


			//无搜索内容获取
			getsearchlists() {
				request({
					url: `/search/lists`,
					method: 'get',
				}).then(res => {
					this.searchlists = res.data.data
				})
			}

		}
	}
</script>

<style scoped lang="less">
	.navheader {
		background-color: #f1f1f1 !important;
		position: sticky;
		top: 0;
		left: 0;
		width: 100vw;
		height: 40upx;
		z-index: 999;
	}

	.searchmain {
		width: 100vw;

		.searchheader {
			background-color: #F1F1F1;
			display: flex;
			width: 100%;
			height: 70upx;
			// line-height: 70upx;
			border-bottom: 1px solid #ccc;
			position: fixed;
			align-items: center;
			padding: 0 30upx;
			left: 0;

			text {
				color: #987;
			}

			.icon-search {
				flex: 1;
				display: block;
				text-align: center;
				font-size: 40upx;
				color: #D6A2E8;
				height: 70upx;
				line-height: 70upx;
			}

			.input1 {
				flex: 7;
				font-size: 32upx;
				height: 70upx;
				line-height: 70upx;
				padding-left: 20upx;
			}
		}

		.chai {
			width: 100vw;

			.chaiitem {
				width: 100%;
				display: flex;
				margin-top: 10upx;
				border-bottom: 1px solid #ccc;

				.left {
					flex: 1;
					padding: 10upx;

					image {
						width: 350upx;
						height: 400upx;
					}
				}

				.right {
					flex: 1;
					padding-right: 10upx;
					display: flex;
					flex-direction: column;
					justify-content: space-around;

					.title {
						font-size: 20px;
						font-weight: 500;
						display: block;
					}

					.list1 {
						font-size: 14px;
						display: block;
						color: #ccc;
					}

					.zan {
						.iconfont {
							margin-left: 15upx;
							font-size: 40upx;
						}
					}
				}
			}
		}
	}
</style>
